@font-face {
    font-family: 'Bt';
    src: url('../font/btword.woff2') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bt';
    src: url('../font/sa-400.woff2') format('truetype');
    font-weight: 300;
    font-style: light;
}
@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.ttf') format('truetype');
  }

@font-face {
    font-family: 'prop';
    src: url(../font/porto6e1d.woff2);
}
:root {
    --my-color: #7bcd40;
    --my-select:#FFF;
    
}
.menu-icon{
    font-size: 40px!important;
}


.caption {
    display: block; /* 默认隐藏文字 */
  }
  
  .animate__animated {
    animation-duration: 1s; /* 动画时间为1秒 */
  }
  
  .animate__fadeInUp {
    animation-name: animate__fadeInUp; /* 指定动画效果 */
  }


body{
    font-family: 'Bt','prop','Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
.banner{
    z-index: 30!important;
}
nav{
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background: #FFF;
}
.public-nav{
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 30;
}
.nav-li{
    cursor: pointer;
    transition: all .5s;
    /* position: relative; */
}
.nav-as{
   
    position: relative;
    overflow: hidden;
}
.nav-as::before{
    transition: all .5s;
    position: absolute;
    width: 100%;
    height: 2px;
    content: "";
    background: var( --my-color);
    left: 0;
    bottom: -10px;
    z-index: 99;
}
.nav-as:hover::before{
    bottom: 10px;
}

.nav-as:hover{
    color: var(--my-color);
}



.nav-li:hover .nav-pull{
    display: block;
    cursor: auto;
}

.nav-pull{
    display: none;
    z-index: 999;
    position: absolute;
    width: 100%;
    background: #FFF;
    left: 0;
    top: 47px;
    overflow: hidden;
    color: #000;
    border-bottom: 5px solid var(--my-color);
}

.nav-pull-li{
    overflow: hidden;
}

.nav-pull-sub{
    display: none;
}

.active .nav-pull-sub{
    display: flex;
}

.active {
    background: var(--my-color);
}
.active .li-titles{
    color: #FFF;
}
.nav-pull-li:hover .nav-pull-sub{
    display: flex;
    z-index: 30;
}
.nav-pull-li:hover{
    background: var(--my-color);
    
}
.nav-pull-li:hover .li-titles{
    color: #FFF;
}

.product-content:hover .product-title{
    color: var(--my-color);
}

.one-count-number{
    color: var(--my-color);
}

.subs-title{
    color: var(--my-color);
}

.one-sub-item:hover{
    color: var(--my-color);
}


.more-btns{
    background: var(--my-color);
    color: #FFF;
}

.swiper-pagination-bullet-active{
    background: var(--my-color)!important;
}
.footer-sub:hover{

    color: var(--my-color);
}
.herf-hash a{
    color: var(--my-color);
}

.product-desc{
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.select-page{
    background: var(--my-color);
    color: #FFF;
    border: #7bcd40 1px solid;
    cursor: not-allowed;
}

.tags{
    border-bottom: 5px solid var(--my-color);
}
.goto-active{
    background: var(--my-color);
}

.descs{
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 60px; 
}

.one-new-content:hover a{
    color: var(--my-color);
}

.tage-one-active{
    background: var(--my-color);
}

.one-news-tags:hover{
    background: var(--my-color);
    color: #FFF;
}
.one-news-tags:hover::before{
    border-right: 12px solid var(--my-color);
}
.one-news-tags::before{
    position: absolute;
    top: 0;
    left: -12px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 12px solid rgba(229, 231, 235, var(--tw-bg-opacity));
    border-bottom: 11px solid transparent;
    content: "";
}

.one-news-tags::after{
    position: absolute;
    left: -2px;
    top: 50%;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    content: "";
    background: #FFF;
    border-radius: 50%;
}

.icon-news{
    width: 55px;
}

.icon-news-detail{
    width: calc(100% - 55px);
}
.new-icon{
    display: block;
    height: 50px;
    width: 50px;
    padding: 5px;
    font-size: 45px!important;
    font-weight: 200;
    border:2px solid rgba(107, 114, 128, var(--tw-text-opacity));
    border-radius: 50%;
}
.new-icon::before{
    left: 0;
    position: absolute;
    top: 12px;
}

.title-desc{
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 40px; 
}
.page-nav-ul li:hover>a{
    color: var(--my-color);
}

.like-desc{
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 80px; 
}

.like-news:hover a{
    color: var(--my-color);
}
.like-desc{
    cursor: grab;
}


.slideshow-container{
    overflow: hidden;
}
.containers{
    transition: all .3s;
}
.slider-box {
    flex: 1; /* 使用flex属性将slider-box元素均匀分配可用宽度 */
    width: 100vw;
}

.sub-nav{
    width: 787px;
}


.swiper{
    --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
    --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px;/* 设置按钮大小 */
}

.swiper-btns{
    color: var(--my-color)!important;
    opacity: 0;
    transition: all .3s;
}

.honor-Swiper:hover .swiper-btns{
    opacity: 1!important;
}

.flow-tabr-icon{
    font-size: 35px!important;
}
.one-tabr{
    background:#FFF;
    z-index: 30!important;
}
.one-tabr:hover{
    background: var(--my-color);
    color: #FFF;
}

.prev-icons{
    font-size:45px !important;
    transition: all .3s;
}

.prv-div{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate( 0,-50%);
    opacity: 0;
    transition: all .3s;
}

.slideshow-container:hover .prv-div{
    opacity: 1;
}

.prev-tos{
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: rgb(184 228 255 / 40%);
    z-index: 30;
}

.prev-tos:hover{
    background: #FFF;
}
.prev-tos:hover .prev-icons{
    color: var(--my-color);
}

.quere-btn:hover{
    background: var(--my-color);
    border: 1px solid var(--my-color);
}

.sdk-imgs img{
    transition: all .3s;
}
.sdk-content:hover img{
    transform: scale(1.1);
}

.cate-gary::before{
    content: "";
    width: 100px;
    height: 1px;
    background: #000;
    position: absolute;
    left: -100px;
    top: 50%;
}
.cate-gary::after{
    content: "";
    width: 100px;
    height: 1px;
    background: #000;
    position: absolute;
    right: -100px;
    top: 50%;
}

.onectes:hover{
    background: var(--my-color);
    color: #FFF;
    border-radius: 3px;
}
.onectes-active{
    background: var(--my-color);
    color: #FFF;
    border-radius: 3px;
}



.que-desc{
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 70px; 
}
.mob-menu{
    left: 100%;
    transition: all .5s;
}
.mob-menu-open{
    left: 0;
}
.mob-iconfont{
    transition: all .3s;
}
.mob-iconfont-active{
    transform: rotate(90deg);
}
.mb-sub-li{
    max-height: 0;
    overflow: hidden;
    transition: all .3s;
}

.mb-sub-li-active{
    max-height: 400px;
}

.show-img{
    max-width: 70%;
    max-height: 90%;
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.goto-a{
    padding: 5px 15px;
    border: 1px solid var(--my-color);
    color: var(--my-color);
    border-radius: 5px;

}
.goto-a:hover{
    background: var(--my-color);
    color: #FFF;
}
.pagination{
    display: flex;
    flex-wrap: wrap;
}

.page-item{
    font-size: 18px!important;
    padding: 5px 15px;
    margin: 3px;
    display: block;
    border: 1px solid var(--my-color);
    color: var(--my-color);
}
.page-item.active{
    color:#FFF;
}
.page-item:hover{
    color:#FFF;
    background: var(--my-color);
}

.page-item:first-child{
    font-size: 20px!important;
}
.next-icons{
    display: block;
    transform: rotate(180deg);
    padding-bottom: 3px;
}

.frend-link a{
    font-size: 14px;
    padding-left: 10px;
    color: #9ca3af;
}

.product-desct{
    display: -webkit-box;
    -webkit-line-clamp: 7; /* 显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 140px; 
}

.li-a:hover{
    color: var(--my-color);
}
.li-a-active{
    color: var(--my-color);
}
@media (max-width:560px){
    .product-desct{
        display: -webkit-box;
        -webkit-line-clamp: 3; /* 显示两行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 60px; 
    }
}   

.sub-nav-lis span{
    transform: rotate(90deg);
}

.sub-nav-lis:hover span{
    transform: rotate(270deg);
}

.sub-pulls{
    overflow: hidden;
    min-height: 80;
    opacity: 0;
    transform: translateY(-10px);
    transition: all .2s;
}

.sub-nav-lis:hover .sub-pulls{
    opacity: 1;
    transform: translateY(0);
}

.one-tabr:hover .phone-show{
    display: block!important;
    color: #000;
}

.phone-show{
    right: calc(100%);
    width: 140px;
    background: #FFF;
}



.share-icon{
    font-size: 28px !important;
    margin-right:  5px;
    margin-top: 5px;
}
.select-option span{
    font-size: 12px;
    padding: 3px 6px;
    margin: 3px;
    background: #000;
    color: #FFF;
    border-radius: 5px;
}
.one-attrs:last-child{
    border:none;
}
.one-new-content .new-desc{
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  
}
.popular-det {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pro-brand-desc{
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.one-popular-title::after{
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    left: -15px;
    background: #000;
    top: 5px;
}
.pro-brand,.product-attr-list{
    display: flex;
}
.pro-brand label{
    width: 73px;
    display: block;
}
.product-attr-list-lable{
    display: block;
    min-width: 100px;
}

.category-params{
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
.choose-span::after{
    left: 0;
    position: absolute;
    font-family: 'iconfont';
    content: '\e68f';
}

.choose-params input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  

.choose-params input[type="checkbox"]:checked ~ .choose-span::after{
    content: '\ee34' !important;
    position: absolute;
    font-family: 'iconfont';
}

.params-list{
    max-height: 240px;
    overflow: hidden;
    transition: all .5s ;
}


.params-list-open{
    max-height: 600px;
}

.adv-content{
    min-height: 80px;
}

.success{
    background: var(--my-color);
    color: #FFF;
    min-width: 40%;
    min-height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


.attr-title{
    display: block;
    min-width: 80px;
}
.one-product-attr-value:nth-child(2n-1){
    background: #f3f3f3;
}
.one-new-content:hover .more-right{
    animation: bouncet 1s infinite ;
}

@keyframes bouncet {
    0%, 100% {
      transform: translateX(-50%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateX(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }